
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Trophy, BookOpen, Brain, Users } from "lucide-react";
import { useRole } from "@/contexts/RoleContext";

interface AssessmentOverviewProps {
  completedCount: number;
  totalModules: number;
}

export function AssessmentOverview({ completedCount, totalModules }: AssessmentOverviewProps) {
  const { role } = useRole();
  const overallProgress = (completedCount / totalModules) * 100;

  const getCompletionTitle = () => {
    return role === 'teacher' ? 'Teaching Assessment Complete' : 'Self Assessment Complete';
  };

  const getCompletionDescription = () => {
    return role === 'teacher' 
      ? "Congratulations! You've completed all assessments and discovered your unique teaching profile."
      : "Congratulations! You've completed all assessments and discovered your unique learning profile.";
  };

  const getProfileSummary = () => {
    if (role === 'teacher') {
      return [
        { icon: <BookOpen className="w-4 h-4 text-blue-600" />, label: "Constructivist Educator" },
        { icon: <Brain className="w-4 h-4 text-purple-600" />, label: "Creative Facilitator" },
        { icon: <Users className="w-4 h-4 text-orange-600" />, label: "Social-Investigative" }
      ];
    } else {
      return [
        { icon: <BookOpen className="w-4 h-4 text-blue-600" />, label: "Visual Learner" },
        { icon: <Brain className="w-4 h-4 text-purple-600" />, label: "Creative Contributor" },
        { icon: <Users className="w-4 h-4 text-orange-600" />, label: "Social-Investigative" }
      ];
    }
  };

  return (
    <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Trophy className="w-5 h-5 text-primary" />
          {getCompletionTitle()}
        </CardTitle>
        <CardDescription>
          {getCompletionDescription()}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid md:grid-cols-2 gap-6">
          <div className="space-y-3">
            <div className="flex justify-between text-sm">
              <span className="font-medium">Overall Progress</span>
              <span className="font-semibold text-green-600">{Math.round(overallProgress)}%</span>
            </div>
            <Progress value={overallProgress} className="h-2" />
            <p className="text-sm text-muted-foreground">
              {completedCount} of {totalModules} assessments completed
            </p>
          </div>
          
          <div className="space-y-3">
            <h4 className="text-sm font-medium">Your Profile Summary</h4>
            <div className="space-y-2">
              {getProfileSummary().map((item, index) => (
                <div key={index} className="flex items-center gap-2">
                  {item.icon}
                  <span className="text-sm">{item.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
